<style type="text/css">
    .selected-search {
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        height: 200px;
        width: 260px;
        position: relative;
        border-radius: 4px;
    }

    .ivu-form-item {
        /*width: 30% !important;*/
    }

    .selected-search .search-action {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .selected-search .selected-arr {
        position: absolute;
        top: 50px;
        left: 20px;
        right: 20px;
        bottom: 10px;
        overflow: scroll;
    }

    .select-click {
        border: 1px solid #dddee1;
        border-radius: 4px;
        padding: 0 10px;
        margin-bottom: 10px;
    }

    .selected-search .selected-arr .selected-item {
        /*border-bottom: 1px solid #dfdfdf;*/
    }

    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <div style="width: 58%">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right"
                :label-width="100">
            <Form-item label="训练单内编号" prop="Trainingsn">
                <i-input v-model="formValidate.Trainingsn" placeholder="请输入训练单内编号"></i-input>
            </Form-item>
            <Form-item label="训练目标" prop="ip">
                <i-input v-model="formValidate.Target" placeholder="请输入训练目标"></i-input>
            </Form-item>
            <Form-item label="训练内容" prop="Targetcontent">
                <i-input v-model="formValidate.Targetcontent" placeholder="请输入训练内容"></i-input>
            </Form-item>
            <Row>
                <Col span="12">
                    <Form-item label="单位" prop="TopTitle">
                        <input v-model="TopTitle"
                               style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                               placeholder="点击选择单位(必填)"
                               @click="openUnitModel()">
                    </Form-item>
                </Col>
                <Col span="12">
                    <Form-item label="部门" prop="orgTitle">
                        <input v-model="orgTitle"
                               style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                               placeholder="点击选择部门(必填)"
                               @click="openOrgModel()">
                    </Form-item>
                </Col>
            </Row>
            <Form-item label="训练起始时间">
                <Row>
                    <i-col span="11">
                        <Date-picker type="datetime" placeholder="选择开始日期"
                                     @on-change="changeStartDate"></Date-picker>
                    </i-col>
                </Row>
            </Form-item>
            <Form-item label="选择计划周期" prop="planTimeType">
                <i-select v-model="planTimeType" @on-change="planTimeChange" placeholder="请选择是计划周期">
                    <i-option value="Isdaily">日计划</i-option>
                    <i-option value="Isweekly">周计划</i-option>
                    <i-option value="Ismonthly">月计划</i-option>
                    <i-option value="Ishalfmonthly">半月计划</i-option>
                    <i-option value="Isquarterly">季度计划</i-option>
                </i-select>
            </Form-item>
            <!--            <Form-item label="是否完成" prop="Isfinished">-->
            <!--                <i-select v-model="formValidate.Isfinished" placeholder="请选择是否完成">-->
            <!--                    <i-option value="true">是</i-option>-->
            <!--                    <i-option value="false">否</i-option>-->
            <!--                </i-select>-->
            <!--            </Form-item>-->
            <!--            <Form-item label="结束时间">-->
            <!--                <Row>-->
            <!--                    <i-col span="11">-->
            <!--                        <Date-picker type="datetime" placeholder="选择结束时间"-->
            <!--                                     @on-change="changeFinishedDate"></Date-picker>-->
            <!--                    </i-col>-->
            <!--                </Row>-->
            <!--            </Form-item>-->
            <Form-item label="训练结束时间">
                <Row>
                    <i-col span="11">
                        <Date-picker v-model="formValidate.Enddate"  type="datetime" placeholder="选择结束日期" @on-change="changeEndDate"></Date-picker>
                    </i-col>
                </Row>
            </Form-item>

            <Form-item>
                <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
                <i-button @click="jumpPage('','UserList')" style="margin-left: 8px">返回</i-button>
            </Form-item>
        </i-form>
        <Modal v-model="isShowModal" title="下面列表选择单位" @on-ok=""
               @on-cancel="isShowModal =false">
            <Tree :show-checkbox="showCheckbox" :data="mainorgData" @on-select-change="mainOrgClickEvent"></Tree>
        </Modal>
        <Modal v-model="isShowModal2" title="下面列表选择部门" @on-ok=""
               @on-cancel="isShowModal2 =false">
            <Tree :show-checkbox="showCheckbox" :data="orgData" @on-select-change="orgClickEvent"></Tree>
        </Modal>
    </div>
</template>

<script>

    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';
    import selectSearch from '../../components/selectSearch';
    import moment from 'moment';

    export default {
        data() {
            return {
                //单位选择树形
                showCheckbox: false,
                isShowModal: false,
                mainorgData: [],
                //单位名称、id
                TopTitle: '',
                TopId: '',
                //组织选择树形
                isShowModal2: false,
                orgData: [],
                //部门名称、id
                Partid: '',
                orgTitle: '',
                //计划周期
                planTimeType: '',
                //表单字段
                formValidate: {
                    Trainingsn: '',
                    Target: '',
                    Targetcontent: '',
                    Startdate: '',
                    Enddate: '',
                    Creatorid: '',
                    Isdaily: false,
                    Isweekly: false,
                    Ishalfmonthly: false,
                    Ismonthly: false,
                    Partid: '',
                    Unitid: '',
                    Isquarterly: false,
                },
                ruleValidate: {},
                //人员类型
                RightlevelidArr: [],
                //某单位下部门
                orgArr: [],
                //门区列表
                geteListArr: [],
                //军衔列表
                militaryRankArr: [],
                //职务列表
                dutyArr: [],
                //图片
                defaultList: [],
                imageList: '',
                imagePost: [],
                visible: false,
                seeImg: '',
                upLoadFile: apiUtil.urls.UploadFile,
                apiUtilBase: apiUtil.urls.baseUrl,
                //新创建人员id
                newUserId: '',

            }
        },
        mounted: function () {
            this.getDutyData();
        },
        components: {
            selectSearch,
        },
        methods: {
            jumpPage: function (id, url) {
                this.$router.back(-1)
            },
            //选择计划时间
            planTimeChange: function (value) {
                console.log('value:', value);
                // <i-option value="Isdaily">日计划</i-option>
                //         <i-option value="Isweekly">周计划</i-option>
                //         <i-option value="Ismonthly">月计划</i-option>
                //         <i-option value="Ishalfmonthly">半月计划</i-option>
                //         <i-option value="Isquarterly">季度计划</i-option>
                let endDate,
                    that;
                    that = this;

                if (value == 'Isdaily') {
                    that.formValidate.Enddate = moment(that.formValidate.Startdate).add(1, 'days').format("YYYY-MM-DD HH:mm:ss");
                } else if (value == 'Ismonthly') {
                    that.formValidate.Enddate = moment(that.formValidate.Startdate).add(1, 'months').format("YYYY-MM-DD HH:mm:ss");
                } else if (value == 'Ishalfmonthly') {

                    that.formValidate.Enddate = moment(that.formValidate.Startdate).add(15, 'days').format("YYYY-MM-DD HH:mm:ss");

                } else if (value == 'Isweekly') {
                    that.formValidate.Enddate = moment(that.formValidate.Startdate).add(1, 'weeks').format("YYYY-MM-DD HH:mm:ss");
                } else {
                    that.formValidate.Enddate = moment(that.formValidate.Startdate).add(3, 'months').format("YYYY-MM-DD HH:mm:ss");
                }


                console.log('endDate:', that.formValidate.Enddate)
            },
            //打开选择单位模态框
            openUnitModel: function () {
                let that = this;
                that.getMainOrgData();
            },
            //打开选择部门模态框
            openOrgModel: function () {
                let that = this;
                if (this.TopId) {
                    this.isShowModal2 = true;
                } else {
                    that.$Notice.open({
                        title: '提示',
                        desc: '请添加单位过后再选择部门。'
                    });
                }
            },
            //选择单位
            mainOrgClickEvent: function (data) {
                console.log('单位数据:', data);
                this.TopTitle = data[0].title;
                this.TopId = data[0].id;
                this.getOrgArr(data[0].id);
            },
            //选择部门
            orgClickEvent: function (data) {
                console.log('部门数据:', data);
                this.orgTitle = data[0].title;
                this.Partid = data[0].id;
            },
            //获取单位数据
            getMainOrgData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetUnitList, params, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length == 0) {
                        that.$Notice.open({
                            title: '提示',
                            desc: '系统中暂无单位信息，请在组织结构中进行添加。'
                        });
                    } else {
                        res.Msg.forEach(function (item, index) {
                            item.expand = true;
                        })

                        that.mainorgData = res.Msg;
                        that.isShowModal = true;

                        console.log('mainorgdata:', that.mainorgData);
                    }

                });
            },
            //获取指定单位下的部门
            getOrgArr: function (id) {
                let that = this;

                let para = {
                    parentId: id,
                };

                this.$Loading.start();
                that.orgTitle = '';
                that.Partid = '';
                apiUtil.get(that, apiUtil.urls.GetDeptList, para, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length <= 0) {
                        that.orgTitle = '';
                        that.Partid = '';
                        that.$Notice.open({
                            title: '提示',
                            desc: '前选择项无部门信息，请他先添加部门之后再进行添加或编辑。'
                        });
                    }
                    that.orgData = res.Msg;
                });
            },

            //添加
            addData: function (model) {
                let that = this;
                model.Partid = that.Partid;
                model.Unitid = that.TopId;
                model.Creatorid = sessionStorage.getItem('userId');


                for (let key in model) {
                    if (key == that.planTimeType) {
                        model[key] = true;
                    }
                    console.log(key + '---' + model[key])
                }
                let params = that.$qs.stringify(model);

                console.log('model:', model);
                apiUtil.post(that, apiUtil.urls.AddTrainingPlan, params, function (res) {

                    that.$Notice.open({
                        title: '通知',
                        desc: '添加成功 ',
                        duration: 0
                    });
                    baseUtil.handleReset(that,'formValidate')

                })
            },

            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;

                console.log('model:', model);
                this.addData(model);

            },
            //选择时间
            changeStartDate: function (date) {
                console.log(date);
                this.formValidate.Startdate = date;
            },
            changeEndDate: function (date) {
                console.log(date);
                this.formValidate.Enddate = date;
            },
            changeFinishedDate: function (date) {
                console.log(date);
                this.formValidate.Finishdate = date;
            },
        }
    }
</script>
